<!--管理员列表-->
<template >
  <div>
    <div id="topdiv">
      <div id="bb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
          <el-breadcrumb-item>管理员列表</el-breadcrumb-item>
          
        </el-breadcrumb>
      </div>

      <div id="vv">
        <el-button
          size="mini"
          type="primary"
          @click="flash"
          class="el-icon-refresh"
        ></el-button>
      </div>
    </div>
    <hr />

   <div id="we">
      <!-- <h2>UserInfo to java 2005</h2> -->
      <el-form :inline="true" :model="fromLise" class="demo-form-inline">
          <el-form-item label="管理员权限" :label-width="formLabelWidth" >
                <el-select v-model="fromLise.roler"  filterable style="width:250px;">
                    <el-option
                    v-for="rolers in rolerName1"
                    :key="rolers.id"
                    :label="rolers.rolerName"
                    :value="rolers.id">
                    </el-option>
                </el-select>
            </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onLikeFind" class="el-icon-thumb"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div id="div1">
      <div id="div2">
          <el-button
            size="mini"
            type="danger"
            slot="reference"
            @click="deleteChoose"
            class="el-icon-delete"
            >批量删除</el-button
          >
        <el-button
          size="mini"
          type="primary"
          @click="addAdminList"
          class="el-icon-circle-plus-outline"
          >添加</el-button
        >
      </div>
      <div id="div3">
          共有数据:<a type="primary">{{ admins.length }}</a
        >条
      </div>
    </div>

    <div id="divtable">
      <el-table
        :data="
          admins.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        style="width: 100% ,border-right:1px solid gray;"
        @selection-change="handleSelectionChange"
      >
       <el-table-column type="selection" width="190" style="border-right:1px solid gray;"> </el-table-column>
            <el-table-column label="ID"  show-overflow-tooltip>
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="车辆照片" :label-width="formLabelWidth">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.img
            }}</span>
          </template> 
        </el-table-column> -->
        <el-table-column label="管理员头像"   show-overflow-tooltip>
          <template slot-scope="scope" align="center">
            <el-popover
              align="left"
              placement="top-start"
              title=""
              trigger="hover"
            >
              <img
                :src="scope.row.img"
                alt=""
                style="width: 200px; height: 150px"
              />
              <img
                class="llimg"
                slot="reference"
                :src="scope.row.img"
                style="width: 100px; height: 80px"
              />
            </el-popover>
            <!-- <i class="el-icon-time"></i>  -->
            <!-- <span style="margin-left: 10px">{{ scope.row.car.adminPicture  }}</span> -->
          </template>
        </el-table-column>
        <el-table-column label="管理员名"  show-overflow-tooltip>
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.adminname }}</span>
          </template>
        </el-table-column>     
       
        <el-table-column label="邮箱"  show-overflow-tooltip>
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.email }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号"  show-overflow-tooltip>
          <template slot-scope="scope">
           
            <span style="margin-left: 10px">{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
         <el-table-column label="角色名"  show-overflow-tooltip>
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.roler.rolerName }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="创建时间"  show-overflow-tooltip>

          <template slot-scope="scope">
             <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.creaTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              class="el-icon-edit"
              >编辑</el-button
            >
            <!-- <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              class="el-icon-delete"
              >删除</el-button
            > -->
            <el-button
              size="mini"
              type="danger"
              slot="reference"
              @click="deleteOne(scope.$index, scope.row)"
              class="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
     <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 5, 10, 20, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="admins.length"
      >
      </el-pagination>
    </div>
    <!-- 模态窗体 修改-->
    <div>
      <el-dialog title="管理员信息" :visible.sync="dialogFormVisible3">
        <el-form :model="admin">
          <el-form-item label="ID" :label-width="formLabelWidth">
            <el-input
              v-model="admin.id"
              autocomplete="off"
              readonly="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="管理员名" :label-width="formLabelWidth">
            <el-input v-model="admin.adminname" autocomplete="off"></el-input>
          </el-form-item>
          
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="admin.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="admin.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色名" :label-width="formLabelWidth">
            <el-input
              readonly="true"
              v-model="admin.rolerName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          
          <el-form-item label="创建时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="admin.creaTime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="选择日期"
              style="width: 730px"
            >
            </el-date-picker>
          </el-form-item>
                  <el-form-item label="管理员头像" :label-width="formLabelWidth">
              <template id="upimg">
                <el-popover
                  align="left"
                  placement="top-start"
                  title=""
                  trigger="hover"
                >
                  <img
                    :src="admin.img"
                    alt=""
                    style="width: 300px; height: 250px"
                  />
                  <img
                    class="upimg"
                    slot="reference"
                    :src="admin.img"
                    @click="uploadimg()"
                    style="width: 150px; height: 100px"
                  />
                </el-popover>
                <div id="upimgdiv" style="clear: both">
                     <el-upload
                      action="http://localhost/uploadimg"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :on-success="uploadOk">
                      <i class="el-icon-circle-plus"></i>
                    </el-upload>
                </div>
              </template>
            </el-form-item>
          <!--  <el-form-item label="状态" :label-width="formLabelWidth">
            <el-input v-model="park.state" autocomplete="off"></el-input>
          </el-form-item> -->
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="upAdmin">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 模态窗体2 添加-->
    <div>
      <el-dialog title="管理员信息" :visible.sync="dialogFormVisible1">
        <el-form :model="addAdmin">
          <el-form-item label="管理员名" :label-width="formLabelWidth">
            <el-input v-model="addAdmin.adminname" autocomplete="off"></el-input>
          </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="addAdmin.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="addAdmin.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="addAdmin.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色名" :label-width="formLabelWidth">
            <!-- <el-input v-model="addAdmin.roler.rolerName" autocomplete="off"></el-input> -->
            <el-select v-model="addAdmin.rolerId" >
              <el-option
                v-for="item in rolers"
                :key="item.id"
                :label="item.rolerName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="addAdmin.creaTime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="选择日期"
              style="width: 730px"
            >
            </el-date-picker>
          </el-form-item>
          <!--  <el-form-item label="状态" :label-width="formLabelWidth">
            <el-input v-model="park.state" autocomplete="off"></el-input>
          </el-form-item> -->
          <el-form-item label="上传管理员照片" style="clear: both; margin-left: 300px">
           <el-upload
          action="http://localhost:8086/uploadimg"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="uploadOk1">
          <i class="el-icon-plus"></i>
        </el-upload>
          </el-form-item>
          
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
    //添加
      addAdmin: {
        adminname: "",
        password: "",
        email: "",
        phone: "",
        rolerId:"",
        creaTime: "",
        img:"",
         adminPicture: "",
      },
      multipleSelection:[],
      rolers: [
        {
          id: 1,
          rolerName: "超级管理员",
        },
        {
          id: 2,
          rolerName: "普通管理员",
        },
        {
          id: 3,
          rolerName: "业主",
        },
        {
          id: 4,
          rolerName: "家庭成员",
        },
        {
          id: 5,
          rolerName: "租户",
        },
      ],

      rolerName1:[],
      rolerName:[],
      fromLise:{},


      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false, //开关模态窗体的状态
      formLabelWidth: "180px", //模态窗体标签显示的宽度
      currentPage: 1, //初始页
      pagesize: 5, //每页的数据
     //修改
     admin: {
        id: 1,
        adminname: "",
        password: "",
        email: "",
        phone: "",
        roler:"",
        creaTime: "",
        img: "",
      },
      admins: [
        {
          id: 1,
          img: "http://h.hiphotos.baidu.com/zhidao/pic/item/0dd7912397dda144dac4acc9b2b7d0a20df486f8.jpg",         
          adminname: "张飞",
          password: "zhangfei",
          email: "zf@qq.com",
          phone:"12344445555",
          roler:"超级管理员",
          creaTime: "2017-09-11 00:00:00",
        },
        
      ],
    };
  },
  // 该模块内部创建完成时执行created事件
  created() {
    this.getAdmin();
    this.getRolerNames();
  },
  methods: {
   uploadOk(response,file,fileList){
        console.log(response);
        this.admin.img = response.data;
    },
      uploadOk1(response,file,fileList){
        console.log(response);
        this.addAdmin.img = response.data;
    },
      uploadOk2(response,file,fileList){
        console.log(response);
        this.addAdmin.img = response.data;
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
    handlePictureCardPreview(file) {
         
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
     flash: function () {
        location.reload();
      },
    getAdmin() {
      //  this.$message("ok");
      // alert("ok");
      this.$axios
        .get("/admin/adminList")
        .then((res) => {
         // alert(res.data.statusCode);
          if (res.data.statusCode == 200) {
            this.admins.length = 0; //清空原有数组内容
            this.admins = res.data.data; //在空数组追加相应的数据
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleEdit: function (i,r) {
      // alert(i+" "+r.id+"  "+r.spaceName);s
      // 更新模态窗体绑定的对象数据

//alert(r.roler.rolerName+"___"+this.admin.roler);
//alert(this.admin.id+"-----"+r.id);
        this.admin.id = r.id,
        this.admin.img = r.img,
        this.admin.adminname = r.adminname,
        this.admin.password = r.password,
        this.admin.email = r.email,
        this.admin.phone=r.phone,
         this.admin.rolerName = r.roler.rolerName,
        this.admin.creaTime = r.creaTime,
        this.admin.img = r.img,
     
        // 显示模态窗体
        this.dialogFormVisible3 = true;
    },
    deleteOne: function (i, r) {
      if (confirm("是否删除？")) {
        // alert(r.id);
        this.$axios
          .delete("/admin/deleteAdmin", {
            params: {
              id: r.id,
            },
          })
          .then((res) => {
            alert(res.data.statusCode);
            if (res.data.statusCode == 200) {
              this.admins.splice(i, 1);
              this.$message(res.data.message);
            } else {
              this.$message(res.data.message);
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    addRoler: function () {
      
    },
          getRolerNames() {
      // this.$message("ok");
      // alert("ok");
      this.$axios
        .get("/roler/findAll")
        .then((res) => {
          // alert("12")
          if (res.data.statusCode == 200) {
            // alert(res.data.data);
            this.rolerName = res.data.data; //在空数组追加相应的数据
            this.rolerName1 = res.data.data; //在空数组追加相应的数据
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    addAdminList: function () {
  
this.dialogFormVisible1 = true;
     
    },
    add:function(){
      // alert(this.addAdmin.adminname+this.addAdmin.password+this.addAdmin.rolerId);
 this.$axios
        .post("/admin/addAdmin", {
          adminname:this.addAdmin.adminname,
          password: this.addAdmin.password,
          email: this.addAdmin.email,
          phone: this.addAdmin.phone,
          rolerId: this.addAdmin.rolerId,
          creaTime: this.addAdmin.creaTime,
          img: this.addAdmin.img,
         
        }) 
        .then((res) => {
        
          // 修改成功
          if (res.data.code == 200) {
             
        //alert(res.data.data)

            //  console.log(admins);
        let obj=this.admins[this.admins.length-1];
        let newid=obj.id+1;
        let rolerName='';
        let roler={id:this.addAdmin.roler,rolerName:''};
        for(let i=0;i<this.rolerName1.length;i++){
           if(this.username[i].id==this.addAdmin.roler){
               rolerName=this.rolerName1[i].rolerName;
               roler.rolerName=rolerName;
           
      
         this.admins.push({
           id:newid,
          adminname:this.addAdmin.adminname,
          password: this.addAdmin.password,
          email: this.addAdmin.email,
          phone: this.addAdmin.phone,
          roler: this.roler.rolerName,
          creaTime: this.addAdmin.creaTime,
          img: this.addAdmin.img,
          adminPicture: this.addAdmin.adminPicture,
                  },);
  
        }
        }
         
            this.$message({
                    message: '添加成功！',
                    type: 'success'
                    });
             this.dialogFormVisible1 = false;

         
          } else {
            this.dialogFormVisible1 = false;
             this.$message({
                    message: '添加失败！',
                    type: 'error'
                    });
          }
        })
        .catch((error) => {});
        }
    },



     deleteChoose: function (i, r) {
      // alert("ggg");
      // alert(this.multipleSelection[1].id);
      let ids = "";
      if (this.multipleSelection.length == 0) {
        alert("至少选中一行");
      } else {
        for (let j = 0; j < this.multipleSelection.length; j++) {
          ids += this.multipleSelection[j].id + ",";
        }
        alert(ids);
        this.$axios
          .delete("/admin/deleteChoose", {
            params: {
              ids: ids,
            },
          })
          .then((res) => {
            if (res.data.statusCode == 200) {
              this.$message(res.data.message);
              for (let j = 0; j < this.multipleSelection.length; j++) {
                this.admins.splice(i, 1);
              }
            }else{
              this.$message(res.data.message);
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    upAdmin: function () {
      // 像后端发出修改请求
      // alert("aaa")
      // alert(this.admin.id);
      this.$axios
        .post("/admin/updateAdmin", {
          id: this.admin.id,
          adminname: this.admin.adminname,
          password: this.admin.password,
          email: this.admin.email,
          phone: this.admin.phone,
          creaTime: this.admin.creaTime,
          img: this.admin.img,
        })
        .then((res) => {
         // alert(res.data.statusCode)
          // 修改成功
          if (res.data.statusCode == 200) {
           
            // 修改成功后，遍历列表数组，用修改的对象数据更新原有数组中同id的对象数据
            for (var i = 0; i < this.admins.length; i++) {
              if (this.admins[i].id == this.admin.id) {
                // alert("qq");

                  this.admins[i].adminname = this.admin.adminname,
                  this.admins[i].password = this.admin.password,
                  this.admins[i].email = this.admin.email,
                  this.admins[i].phone = this.admin.phone,                 
                  this.admins[i].creaTime = this.admin.creaTime,
                  this.admins[i].img = this.admin.img,
                this.$message(res.data.message);
              }
            }
          } else {
            this.dialogFormVisible3 = false;
            this.$message(res.data.message);
          }
        })
        .catch((error) => {});
      this.dialogFormVisible3 = false;
    },
      onLikeFind: function () {
      // alert(this.rolers.comId);
      this.$axios
        .post("/admin/findLike", {
          id: this.rolers.id,
        })
        .then((res) => {
          if (res.data.statusCode == 200) {
            this.admins = res.data.info;
            console.log(this.parks);
          } else {
            this.$message(res.data.message);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  
};
</script>
<style >
#div1 {
  height: 50px;
  line-height: 50px;
}
#topdiv {
  height: 50px;
}
#div2 {
  float: left;
}
#div3 {
  float: right;
  line-height: 20px;
}
#p1 {
  font-size: 15px;
  float: left;
}

#we {
  height: 50px;
  line-height: 30px;
  font-size: 18px;
}
#vv {
  line-height: 30px;
  float: right;
}
#divtable .el-table__header th,
#divtable .el-table__header tr {
  background-color: beige;
}
#bb {
  margin-top: 10px;
  float: left;
}
#divtable {
  line-height: 40px;
}
#upimgdiv .el-upload,
#upimgdiv .el-button,
#upimgdiv {
  height: 20px;
  width: 80px;
  margin: 4px 4px;
  line-height: 0px;
}
</style> 